<template>
    <div class="project-container" v-loading="loading" ref="projectContainer">
        <div class="project-item" v-for="item in data" :key="item.id">
            <a :href="item.url ? item.url : `javascript:alert('该项目无法通过外网访问')`" :target="item.url ? '_blank' : '_self'">
                <img v-lazy="item.thumb" calss="thumb">
            </a>
            <div class="info">
                <h2>{{ item.name }}</h2>
                <a :href="item.github" v-if="item.github" class="github">github</a>
            </div>
            <p v-for="(desc, i) in item.description" :key="i">
                {{ desc }}
            </p>
        </div>
        <Empty v-if="data.length === 0 && !isLoading" />
    </div>
</template>

<script>
import { mapState } from "vuex"
import mainScroll from "@/mixins/mainScroll"
import Empty from "@/components/Empty"
export default {
    components:{
        Empty
    },
    computed: {
        ...mapState("project", ["loading", "data"])
    },
    mixins:[mainScroll("projectContainer")],
    created() {
        this.$store.dispatch("project/fetchProject")
    }
}
</script>

<style scoped lang="less">
@import "~@/styles/var.less";

.project-container {
    width: 100%;
    height: 100%;
    position: relative;
    box-sizing: border-box;
    padding: 26px;
    margin-bottom: 20px;
    overflow-y: auto;
    scroll-behavior: smooth;
}

.project-item {
    transition: 0.5s;
    padding: 20px;
    display: flex;
    margin-bottom: 20px;

    &:hover {
        box-shadow: -1px 1px 5px #000;
        transform: scale(1.01) translate(3px, -3px);
        color: inherit;
    }

    .thumb {
        width: 25px;
        min-height: 150px;
        flex: 0 0 auto;
        object-fit: cover;
        border-radius: 5px;
        margin-right: 15px;
    }

    .info {
        line-height: 1.7;
        flex: 1 1 auto;

        h2 {
            margin: 0;
        }
    }

    .github {
        font-size: 14px;
        color: @primary;
    }
}
</style>